<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">

        function sort(inputText) {
            var text = inputText.split("\n");
            var set = new Set(text);
            text = [ ...set ].sort();
            document.getElementById('textAfterSort').value = text.join("\n");
        }

        function clearContent() {
            document.getElementById('textBeforeSort').value = '';
            document.getElementById('textAfterSort').value = '';
        }
    </script>
</head>
<body>
    <textarea style="width:40%;"  name="textBefore" id="textBeforeSort" rows="40" placeholder="text before sort"></textarea>
    <button style="width:60px" type="submit" onclick="sort(document.getElementById('textBeforeSort').value)">sort</button>
    <button style="width:60px" type="input" onclick="clearContent()">clear</button>
    <textarea style="width:40%;" name="textAfter" id="textAfterSort" rows="40" placeholder="text after sort"></textarea>
</body>
</html>


